<template>
  <el-dialog
    v-model="dialogVisibled"
    :title="dialogTitle"
    width="500"
    :draggable="true"
    :before-close="handleClose"
    @open="handleDialogOpen"
  >
    <div class="custom-divider-top"></div>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="modelData"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名称" prop="UserName">
        <el-input v-model="modelData.UserName" maxlength="20" />
      </el-form-item>
      <el-form-item label="用户密码" prop="Password">
        <el-input v-model="modelData.Password" type="password" maxlength="20" />
      </el-form-item>
      <el-form-item label="用户年龄" prop="Age">
        <el-input-number
          v-model="modelData.Age"
          :min="1"
          :max="200"
          step-strictly
        />
      </el-form-item>
      <el-form-item label="用户性别" prop="Sex">
        <el-radio-group v-model="modelData.Sex">
          <el-radio value="1" size="large">男</el-radio>
          <el-radio value="2" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属公司" prop="CorporationKey">
        <el-select
          :disabled="modelData.UserId === '' ? false : true"
          @change="selectClick"
          v-model="modelData.CorporationKey"
          placeholder="请选择公司"
        >
          <el-option
            v-for="item in corporationList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="DepartmentId">
        <el-tree-select
          placeholder="请选择部门"
          v-model="modelData.DepartmentId"
           :default-expanded-keys="[modelData.DepartmentId]"
          :data="departmentList"
          check-strictly
          :render-after-expand="false"
        >
        </el-tree-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="IsOpen">
        <el-switch
          v-model="modelData.IsOpen"
          class="ml-2"
          width="60"
          inline-prompt
          active-text="启用"
          inactive-text="不启用"
        />
      </el-form-item>
      <div class="custom-divider-bottom"></div>
      <div style="justify-content: right; align-items: right; display: flex">
        <el-button type="success" icon="Check" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <!-- <el-button
          type="warning"
          icon="RefreshRight"
          @click="resetForm(ruleFormRef)"
          >重置</el-button
        > -->
        <el-button type="danger" icon="Close" @click="handleClose"
          >关闭</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>
  <script  lang="ts">
import {
  ref,
  reactive,
  onMounted,
  defineComponent,
  PropType,
  computed,
} from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { insert, update } from "@/api/user";
import { selectOutPut } from "@/model/public/selectModel";
import { getAllCorporationSelect } from "@/api/corporation";
import { SysUser } from "@/model/user/user";
import { getCorporationDepartmentList } from "@/api/department";
import { treeOutPut } from "@/model/public/treeModel";
import { el } from "element-plus/es/locale";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    dialogTitle: { type: String },
    modelData: {
      type: Object as PropType<SysUser>,
      required: true,
    },
  },

  setup(props, context) {
    //公司数据
    const corporationList = ref<selectOutPut[]>([]);
    //部门数据
    const departmentList = ref<treeOutPut[]>([]);
    //规则验证
    const ruleFormRef = ref<FormInstance>();
    //公司key
    const corporationKey = ref<string>("");
    //部门key
    const departmentKey = ref<string>("");

    //初始加载dom
    onMounted(() => {
      getCorporation();
      //getCorporationDepartmentListMsg();
    });
    //获取下拉框中的公司数据
    const getCorporation = function () {
      getAllCorporationSelect().then(({ data, code, msg }) => {
        if (code == 200) {
          corporationList.value = data;
        }
      });
    };

    //获取部门数据
    const getCorporationDepartmentListMsg = function (corporationKey: string) {
      getCorporationDepartmentList({ corporationKey: corporationKey }).then(
        ({ data, code, msg }) => {
          if (code == 200) {
            departmentList.value = data;
          }
        }
      );
    };

    //公司点击事件
    const selectClick = function (value: string) {
      if (value == corporationKey.value)
        props.modelData.DepartmentId = departmentKey.value;
      else props.modelData.DepartmentId = "";
      getCorporationDepartmentListMsg(value);
    };

    //打开时加载
    const handleDialogOpen = function () {
      corporationKey.value = props.modelData.CorporationKey;
      departmentKey.value = props.modelData.DepartmentId;
      getCorporationDepartmentListMsg(props.modelData.CorporationKey);
    };

    //验证规则
    const rules = reactive<FormRules<typeof props.modelData>>({
      UserName: [
        {
          required: true,
          message: "请填写用户名称!",
          trigger: "blur",
        },
      ],
      Password: [
        {
          required: true,
          message: "请填写用户密码!",
          trigger: "blur",
        },
      ],
      CorporationKey: [
        {
          required: true,
          message: "请选择所属公司!",
          trigger: "blur",
        },
      ],
      DepartmentId: [
        {
          required: true,
          message: "请选择所属部门!",
          trigger: "blur",
        },
      ],
    });

    //提交
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          if (props.modelData.UserId == "") {
            insert(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                handleClose();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          } else {
            update(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                handleClose();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          }
        }
      });
    };

    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    //是否显示dialog
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    //关闭事件
    const handleClose = () => {
      context.emit("closeBnt");
      resetForm(ruleFormRef.value);
      //  done();
    };

    return {
      handleClose,
      dialogVisibled,
      ruleFormRef,
      submitForm,
      rules,
      resetForm,
      corporationList,
      departmentList,
      selectClick,
      handleDialogOpen,
      corporationKey,
      departmentKey,
    };
  },
  components: {},
});
</script>
  
  <style>
</style>